<script setup lang="ts">
import { ref, reactive, inject } from "vue"
import { ElMessage } from "element-plus"
import { updateCertifiedWhiteDetailApi, askCertifiedWhiteDetailApi } from "#/api/certificate/white-link"
import dayjs from 'dayjs';
import { $t } from "#/locales";


defineOptions({ name: 'Dialog' })

const { getCertifiName } = inject('certifiDetail') as any;

// 步骤： 1--生成证书， 2--提交
const stepRef = ref(1)
const emit = defineEmits(['updateTable', 'previewCerti'])
const submitLoading = ref(false)
const dialogVisible = ref(false)
const editData = ref()
const defaultFrom = {
  examTakeTime: null,
  score: null,
}
const formRef = ref()
const formInline = reactive({ ...defaultFrom })
const rules = {
  score: [{ required: true, message: $t('common.inputPhTxt', [$t('whiteLink.scoreTxt')]), trigger: 'change' }],
}

const certiInfo = ref()
const handleClose = () => {
  Object.assign(formInline, defaultFrom)
  dialogVisible.value = false
  stepRef.value = 1
  certiInfo.value = null
  formRef.value?.resetFields()
}

const inint = (data: any = null) => {
  if (data) {
    console.log(data)
    const { examTakeTime, score } = data
    editData.value = data
    if (data.certificate) {
      stepRef.value = 2
    }
    Object.assign(formInline, { examTakeTime, score })
  }
  dialogVisible.value = true

}

const scoreUpdate = () => {
  stepRef.value = 1
}

const submit = () => {
  if (!formRef) return
  formRef.value?.validate((valid: any) => {
    if (valid) {
      const params = formInline as any
      params.id = editData.value.id
      if (certiInfo.value) {
        const { certificateNumber, meansTime, validTime } = certiInfo.value
        params.certificate = `certificate/${certificateNumber}.pdf`
        params.certificateNumber = certificateNumber
        params.meansTime = meansTime
        params.validTime = validTime
      }
      submitLoading.value = true
      console.log(params)
      updateCertifiedWhiteDetailApi(params).then(() => {
        handleClose()
        dialogVisible.value = false
        emit('updateTable')
      }).finally(() => {
        submitLoading.value = false
      })
    }
  })
}

const handlePreview = () => {
  if (formInline.score) {
    const params = {
      userId: editData.value.userId,
      certifiedId: editData.value.certifiedId,
      score: formInline.score,
    }
    askCertifiedWhiteDetailApi(params).then((res) => {
      console.log(res)
      certiInfo.value = res
      if (res) {
        const certifiedId = editData.value?.certifiedId
        emit('previewCerti', { certifiedId, ...certiInfo.value })
      } else {
        ElMessage({
          type: 'warning',
          message: $t('whiteLink.scoreNotPassTxt'),
        })
      }
      stepRef.value = 2
    }).finally(() => {
    })
  } else {
    ElMessage({
      type: 'info',
      message: $t('common.inputPhTxt', [$t('whiteLink.scoreTxt')]),
    })
  }
}

defineExpose({ inint })

</script>
<template>
  <el-dialog v-model="dialogVisible" align-center :destroy-on-close="true" :title="$t('common.editTxt')" width="400"
    :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose">
    <el-form ref="formRef" label-width="100px" :rules="rules" :model="formInline" label-position="right">
      <el-form-item :label="$t('whiteLink.memberNameTxt')">
        <div>{{ editData.name ?? '--' }}</div>
      </el-form-item>
      <el-form-item :label="$t('whiteLink.certifiedNameTxt')">
        <div>{{ getCertifiName(editData.certifiedId) ?? '--' }}</div>
      </el-form-item>
      <el-form-item :label="$t('whiteLink.buyTimeTxt')">
        <div>{{ dayjs(editData.createTime).format('YYYY-MM-DD HH:mm:ss') ?? '--' }}</div>
      </el-form-item>
      <el-form-item :label="$t('whiteLink.examTakeTimeTxt')" prop="examTakeTime">
        <el-date-picker :default-time="new Date()" v-model="formInline.examTakeTime" type="datetime" style="width: 100%"
          value-format="YYYY-MM-DD HH:mm:ss" :unlink-panels="true" />
      </el-form-item>
      <el-form-item :label="$t('whiteLink.scoreTxt')" prop="score">
        <el-input type="number" :maxlength="200" @change="scoreUpdate" v-model="formInline.score" :placeholder="$t('common.inputPhTxt', [$t('whiteLink.scoreTxt')])" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">
          {{ $t('common.cancelTxt') }}
        </el-button>
        <el-button type="primary" v-if="stepRef === 1" @click="handlePreview">{{ $t('whiteLink.generateTxt') }}</el-button>
        <el-button type="primary" v-if="stepRef === 2" @click="submit" :loading="submitLoading">
          {{ $t('common.submitTxt') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="less" scoped>
.hide-upload-btn :deep(.el-upload--picture-card) {
  display: none !important;
}
</style>
